import React from "react";
import { Button, Typography } from "antd";
import { Film } from "lucide-react";
import { useNavigate } from "react-router-dom";

const { Title, Text } = Typography;

const Dashboard: React.FC = () => {
  const navigate = useNavigate();

  const handleStartCreating = () => {
    navigate("/create");
  };

  return (
    <div
      style={{
        minHeight: "100vh",
        display: "flex",
        alignItems: "center",
        justifyContent: "center",
        position: "relative",
        overflow: "hidden",
      }}
    >
      {/* 装饰性元素 */}
      <div
        style={{
          position: "absolute",
          top: "20%",
          right: "10%",
          width: "100px",
          height: "100px",
          background: "rgba(255, 255, 255, 0.1)",
          borderRadius: "50%",
          transform: "rotate(45deg)",
        }}
      />
      <div
        style={{
          position: "absolute",
          bottom: "30%",
          left: "15%",
          width: "80px",
          height: "80px",
          background: "rgba(255, 255, 255, 0.08)",
          borderRadius: "50%",
        }}
      />

      {/* 主要内容 */}
      <div
        style={{
          textAlign: "center",
          color: "black",
          zIndex: 1,
          maxWidth: "600px",
          padding: "0 24px",
        }}
      >
        <div style={{ marginBottom: "32px" }}>
          <Film size={64} color="black" style={{ marginBottom: "24px" }} />
          <Title
            level={1}
            style={{
              color: "black",
              fontSize: "48px",
              fontWeight: "bold",
              marginBottom: "16px",
              lineHeight: "1.2",
            }}
          >
            强大的剪映自动化工具
          </Title>
          <Text
            style={{
              fontSize: "18px",
              color: "rgba(1, 1, 1, 0.8)",
              display: "block",
              marginBottom: "48px",
            }}
          >
            快速高效地创建和编辑您的视频项目
          </Text>
        </div>

        <Button
          type="primary"
          size="large"
          style={{
            height: "56px",
            padding: "0 40px",
            fontSize: "18px",
            fontWeight: "bold",
            borderRadius: "28px",
            background: "#1890ff",
            border: "none",
            boxShadow: "0 8px 24px rgba(24, 144, 255, 0.3)",
          }}
          onClick={handleStartCreating}
        >
          开始创作
        </Button>
      </div>
    </div>
  );
};

export default Dashboard;
